<template>
	<view class="page">
		<view class="navbar fillx t-bb-u frsc">
			<view class="navbar-item frcc" :style="finalNavbarItemWidth" v-for="item in navbarList" :key="item.name" :class="{'ischoose':item.name===chooseTopbar}" @click="chooseTopbar=item.name">
				{{item.name}}
			</view>
		</view>
		<view class="content">
			<orderlist-content :list="list"/>
		</view>
		<u-back-top :scroll-top="scrollTop" top="600" icon="arrow-up" tips="顶部"></u-back-top>
		<uni-load-more :status="status" iconType="auto" v-show="!isLodingToast"></uni-load-more>
	</view>
</template>

<script>
	import {
	      mapState,
	      mapMutations
	  } from 'vuex'
	import orderlistContent from '@/components/order/orderlist/content.vue'
	import uniLoadMore from '@/components/uni-ui/uni-load-more/uni-load-more.vue'
	export default {
		components:{
			orderlistContent,
			uniLoadMore
		},
		data() {
			return {
				navbarList:[
					{name:'全部',status:''},
					{name:'待发货',status:'20'},
					{name:'待收货',status:'30'},
					{name:'已完成',status:'50'},
					{name:'已取消',status:'0'},
				],
				chooseTopbar:'',
				statusList:['more','loading','noMore'],
				status:'more',
				webviewStyles: {
						progress: {
								color: '#FF3333'
						}
				},
				currentPage:1,
				data:{},
				list:[],
				infoPage:{},
				chooseStatus:'',
				isLodingToast:false,
				isPullLoading:false,
				scrollTop:0
			}
		},
		methods: {
			...mapMutations(['getNetworkType','vuexRequest']),
			getUrl(url){
				this.url=url
			},
			getlist(status=this.chooseStatus,page=this.currentPage){
				this.vuexRequest({
					url:'/api/addons/execute?route=agent/my-agent-order&addon=o-s-mall-dist',
					method: 'GET',
					data: {'access-token':this.token,'order_status':status,'page':page,'per-page':10},
					success:(res)=>{
						//console.log(res.data)
						this.pageInfo=res.data.data.pageInfo
						if(page>1){
							this.list=this.list.concat(res.data.data.list)
							this.currentPage = res.data.data.pageInfo.currentPage;
						}else{
							this.list=res.data.data.list;
							this.currentPage = res.data.data.pageInfo.currentPage;
						}
						if(this.isPullLoading){
							uni.stopPullDownRefresh()
							this.isPullLoading=false
						}
						if(this.isLodingToast){
							this.hideLoading()
							this.isLodingToast=false
						}
						if(this.currentPage>=res.data.data.pageInfo.pageCount){
							this.status='noMore'
						}else{
							this.status='nome'
						}
					}
				})
			},
			getNextPage(){
				this.currentPage=++this.currentPage
				this.status='loading'
				this.getlist()
			},
			showLoading(title='正在加载'){
				uni.showLoading({
					title:title
				})
			},
			hideLoading(){uni.hideLoading()}
		},
		computed:{
			...mapState(['token']),
			finalNavbarItemWidth(){
				let n=this.navbarList.length
				let size=(100/n).toFixed(5)+'vw'
				return `width:${size};height:40px;`
			},
			showList(){
				let status=this.navbarList&&this.navbarList.find(a=>a.name===this.chooseTopbar).status
				console.log(status===0?this.list:this.list.filter(a=>a.status===status))
				return status===0?this.list:this.list.filter(a=>a.status===status)
			}
		},
		watch:{
			chooseTopbar(){
				let topbar=this.chooseTopbar
				this.chooseStatus=topbar==='全部'?'':topbar==='已取消'?'0':topbar==='待发货'?'20':topbar==='待收货'?'30':'50'
				this.list=[]
				this.isLodingToast=true
				this.showLoading()
				this.getlist(this.chooseStatus)
			}
		},
		onLoad(option) {
			if(JSON.stringify(option)!=='{}'){
				this.chooseTopbar=option.choose
			}else{
				this.chooseTopbar='全部'
			}
		},
		onShow(){
			/* this.isLodingToast=true
			this.showLoading()
			this.getlist() */
		},
		onPullDownRefresh() {
			this.status='loading'
			this.list=[]
			this.isLodingToast=true
			this.isPullLoading=true
			this.showLoading()
			this.getlist(this.chooseStatus)
		},
		onReachBottom() {
			console.log('上拉触底')
			if(this.currentPage>=this.pageInfo.pageCount){
				this.status='noMore'
				uni.showToast({
					title:'没有更多了',
					icon:'none'
				})
				return 
			}
			this.getNextPage()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style scoped>
	.page{
		height: auto;
	}
	.navbar{
		position: sticky;
		top: 0;
		background-color: #f8f8f8;
		z-index: 20;
	}
	/* #ifdef H5 */
	.navbar{
		position: sticky;
		top: 44px;
		background-color: #f8f8f8;
		z-index: 20;
	}
	/* #endif */
	
	.navbar-item{
		box-sizing: border-box;
	}
	.ischoose{
		border-bottom: 2px solid #d7003a;
	}
</style>
